<div class="container">
  <h2 class="title">人员登记系统</h2>
  <div class="list">
    <ul>
      <li>
        <label for="username">姓名：</label>
        <input type="text" id="username" [(ngModel)]="peopleInfo.username">
      </li>
      <li>
        <label for="">性别：</label>
        <input type="radio" name="gender" id="gender1" value="male" [(ngModel)]="peopleInfo.gender">
        <label for="gender1">男</label>&nbsp;&nbsp;&nbsp;
        <input type="radio" name="gender" id="gender2" value="female" [(ngModel)]="peopleInfo.gender">
        <label for="gender2">女</label>
      </li>
      <li>
        <label for="">城市：</label>
        <select name="" [(ngModel)]="peopleInfo.city">
          <!-- <option value="广州">广州</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="深圳">深圳</option> -->
        <option [value]="item" *ngFor="let item of peopleInfo.citys">{{item}}</option>
        </select>
      </li>
      <li>
        <label for="">爱好：</label>
        <span *ngFor="let item of peopleInfo.hobby;let key = index">
          <input type="checkbox" [id]="'check' + key" [(ngModel)]="item.checked">
          <label [for]="'check' + key">{{item.title}}</label>&nbsp;&nbsp;&nbsp;
        </span>
      </li>
      <li>
        <label for="mark">备注：</label>
        <textarea name="" id="" cols="30" rows="10" id="mark" [(ngModel)]="peopleInfo.mark"></textarea>
      </li>
    </ul>
    <button (click)="submit()">提交</button>
    <pre>{{peopleInfo | json}}</pre>
  </div>
</div>
